استخدام مخطط المكدّس StackLayout في Xamarin – الجزء الأوّل

يُعتبر Xamarin.Forms واحدًا من أبرز أطر العمل (Frameworks) التي تتيح تطوير تطبيقات عبر منصات متعددة باستخدام قاعدة شيفرة واحدة بلغة #C‎. من ضمن الأدوات الأساسية التي يوفرها هذا الإطار لتصميم الواجهات الرسومية هو مخطط المكدّس StackLayout، والذي يُعدّ أداة أساسية لتنظيم المحتوى داخل واجهات التطبيقات.

في هذا المقال المطول، سيتم التعمق في المفاهيم المرتبطة باستخدام StackLayout، حيث نناقش بنيته، استخداماته، خصائصه، وأفضل الممارسات لدمجه ضمن تطبيقات Xamarin.Forms بطريقة تحقق الكفاءة البصرية والبرمجية.

المفهوم العام لـ StackLayout

StackLayout هو نوع من الـ Layouts يُستخدم لترتيب العناصر الرسومية (Views) بشكل عمودي أو أفقي. بمعنى آخر، يقوم بتكديس العناصر فوق بعضها البعض أو بجانب بعضها البعض حسب الاتجاه المحدد، مما يسهل التحكم في تنظيم المحتوى داخل واجهات المستخدم بطريقة منظمة وسهلة الفهم.

الخصائص الأساسية:

• Orientation: تحدد اتجاه التكديس، إما عمودي (Vertical) أو أفقي (Horizontal).

• Spacing: المسافة بين العناصر داخل المخطط.

• Padding: الحواف الداخلية للمخطط، أي المسافات التي تفصل بين حواف StackLayout ومحتوياته.

• HorizontalOptions و VerticalOptions: تتحكم في توجيه وتوسعة العناصر ضمن المخطط.

• IsClippedToBounds: تحدد إذا ما كانت العناصر ستُقص لتناسب حدود StackLayout.

البنية التركيبية لـ StackLayout

عند استخدام StackLayout في Xamarin.Forms، يمكن كتابته باستخدام XAML (لغة الترميز الخاصة بواجهة المستخدم) أو من خلال الكود البرمجي بلغة C#. فيما يلي أمثلة على البنية التركيبية بكلا الأسلوبين:

باستخدام XAML:

xml
CopyEdit
<StackLayout Orientation="Vertical" Spacing="10" Padding="20">
    <Label Text="مرحبا بك في Xamarin" FontSize="20" />
    <Entry Placeholder="ادخل اسمك" />
    <Button Text="اضغط هنا" />
StackLayout>

باستخدام C#:

csharp
CopyEdit
StackLayout stackLayout = new StackLayout
{
    Orientation = StackOrientation.Vertical,
    Spacing = 10,
    Padding = new Thickness(20),
    Children =
    {
        new Label { Text = "مرحبا بك في Xamarin", FontSize = 20 },
        new Entry { Placeholder = "ادخل اسمك" },
        new Button { Text = "اضغط هنا" }
    }
};

الفرق بين الاتجاه العمودي والأفقي

الاتجاه العمودي (Vertical):

• الاستخدام: يُستخدم عندما تريد ترتيب العناصر من الأعلى إلى الأسفل.

• الأمثلة: نماذج تسجيل الدخول، القوائم العمودية، نماذج إدخال البيانات.

الاتجاه الأفقي (Horizontal):

• الاستخدام: يُستخدم لعرض العناصر بجانب بعضها البعض.

• الأمثلة: عرض مجموعة أزرار، أيقونات الشبكات الاجتماعية، خطوط تقدم رأسية.

الأمثلة العملية

مثال 1: واجهة تسجيل دخول بسيطة

xml
CopyEdit
<StackLayout Padding="30" Spacing="15">
    <Entry Placeholder="اسم المستخدم" />
    <Entry Placeholder="كلمة المرور" IsPassword="True" />
    <Button Text="تسجيل الدخول" BackgroundColor="DarkBlue" TextColor="White"/>
StackLayout>

يُستخدم هنا StackLayout لترتيب الحقول بشكل عمودي مع إضافة مسافات مناسبة بين العناصر.

مثال 2: قائمة أدوات تحكم أفقية

xml
CopyEdit
<StackLayout Orientation="Horizontal" Spacing="20">
    <Button Text="الرئيسية" />
    <Button Text="الملف الشخصي" />
    <Button Text="الإعدادات" />
StackLayout>

في هذا المثال تم ترتيب الأزرار بشكل أفقي مما يُسهل تصميم شريط التنقل.

الفروقات مع Layouts أخرى

التحديات في استخدام StackLayout

رغم سهولة استخدامه، إلا أن StackLayout يعاني من بعض المشكلات التي قد تؤثر على الأداء في الحالات المعقدة، ومنها:

1. مشاكل الأداء في التطبيقات الكبيرة: لأنه يعيد حساب تخطيط العناصر في كل مرة تحدث فيها تغييرات.

2. عدم دعم التراكب (Overlay): لا يمكن وضع عنصر فوق عنصر آخر.

3. عدم ملاءمته للواجهات المعقدة: خاصة التي تتطلب تنسيقًا دقيقًا باستخدام الصفوف والأعمدة.

الحقول المرتبطة بأداء StackLayout

عند العمل مع StackLayout، يجب الانتباه إلى بعض الجوانب المرتبطة بالأداء:

• القياسات الديناميكية: يمكن أن تؤدي إلى استهلاك زائد للذاكرة إذا كانت كثيرة التغيير.

• استخدام ScrollView مع StackLayout: عند إدراج العديد من العناصر داخل StackLayout، يجب تغليفها بـ ScrollView لتفادي مشاكل التمرير والقياس الزائد.

مثال:

xml
CopyEdit
<ScrollView>
    <StackLayout Padding="20" Spacing="10">
        
    StackLayout>
ScrollView>

استخدام StackLayout مع خصائص متقدمة

خاصية BindableLayout

عند الحاجة إلى تكرار عناصر في StackLayout بناءً على مصدر بيانات (مثل قائمة)، يمكن استخدام خاصية BindableLayout:

xml
CopyEdit
<StackLayout BindableLayout.ItemsSource="{Binding MyList}">
    <BindableLayout.ItemTemplate>
        <DataTemplate>
            <Label Text="{Binding اسم}" />
        DataTemplate>
    BindableLayout.ItemTemplate>
StackLayout>

هذا الأسلوب يُعدّ بديلاً خفيفًا عن استخدام ListView أو CollectionView في حالات العرض البسيط.

الاعتبارات التصميمية

من الضروري أن تتم مراعاة بعض النقاط عند تصميم واجهات باستخدام StackLayout:

• الاقتصاد في العناصر: تجنب إضافة عدد كبير من العناصر غير الضرورية.

• استخدام الأحجام النسبية: بدلاً من استخدام أرقام ثابتة لتحديد الأحجام.

• التوافق مع الأجهزة المختلفة: StackLayout يتكيف بسهولة مع الشاشات المتنوعة، ولكن يجب تجريب الواجهة على مقاسات متعددة للتأكد من سلامة الترتيب.

أفضل الممارسات عند استخدام StackLayout

• عدم استخدام StackLayout في الحلقات المعقدة التي تتطلب أداءً عاليًا، واستبداله بـ Grid عند الحاجة.

• عدم تداخل StackLayouts بكثرة لأن ذلك يؤدي إلى عبء كبير على المعالج الرسومي.

• استخدام Spacing و Padding بذكاء لتحقيق تنسيق نظيف ومتوازن دون التأثير على الحجم الكلي للواجهة.

• استخدام HorizontalOptions و VerticalOptions لضبط تموضع العناصر بمرونة داخل المخطط.

مخطط توضيحي لأنواع الاتجاه في StackLayout

استنتاج تقني

إن StackLayout يُعتبر خيارًا مثاليًا لتصميم الواجهات في التطبيقات البسيطة إلى متوسطة التعقيد، بفضل سهولة استخدامه وسرعة كتابته. إلا أن التوسع في استخدامه ضمن واجهات معقدة قد يؤدي إلى تأثيرات سلبية على الأداء، مما يتطلب اللجوء إلى مخططات أكثر تطورًا كـ Grid أو FlexLayout. بالرغم من ذلك، فإن StackLayout يبقى أداة جوهرية في مكتبة Xamarin.Forms ويُعدّ نقطة انطلاق ممتازة لكل مطور يتعامل مع تصميم الواجهات التفاعلية.

المصادر

• Microsoft Docs: StackLayout in Xamarin.Forms

• Xamarin Official Guide: Layouts in Xamarin.Forms, 2024 Edition